<script setup lang="ts">
  import { HMessageBox } from '@/components/common/message'
  import moment from 'moment'
  import { PropType, ref, watch } from 'vue'

  const props = defineProps({
    startDatePlaceholder: {
      type: String,
      default: () => '请选择开始日期',
    },
    endDatePlaceholder: {
      type: String,
      default: () => '请选择结束日期',
    },
    startDateWidth: {
      type: Number,
      default: () => 120,
    },
    endDateWidth: {
      type: Number,
      default: () => 120,
    },
    startDateVal: {
      type: String,
      default: () => '',
    },
    endDateVal: {
      type: String,
      default: () => '',
    },
    dateFormat: {
      type: String as PropType<'YYYY-MM-DD' | 'YYYY-MM-DD HH:mm' | 'YYYY-MM-DD HH:mm:SS'>,
      default: () => 'YYYY-MM-DD',
    },
  })

  const emits = defineEmits<{
    (e: 'change', val: { startDate: string; endDate: string }): void
  }>()

  // 开始日期
  const startDate = ref('')

  // 结束日期
  const endDate = ref('')

  /**
   * 开始日期是否小于结束日期
   */
  const isStartDateBeforeEndDate = () => {
    return moment(startDate.value).isSameOrBefore(endDate.value)
  }

  /**
   * 格式化开始和结束日期
   * @param {(string|Date)} startDate - 日期
   * @param {(string|Date)} endDate - 日期
   */
  const formatStartAndEndDate = (startDate: string | Date, endDate: string | Date) => {
    const startDateVal = startDate ? moment(startDate).format(props.dateFormat) : ''
    const endDateVal = endDate ? moment(endDate).format(props.dateFormat) : ''
    return {
      startDate: startDateVal,
      endDate: endDateVal,
    }
  }

  /**
   * 开始日期更新事件
   */
  const handleStartDateChange = () => {
    if (startDate.value && endDate.value) {
      if (isStartDateBeforeEndDate()) {
        emits('change', formatStartAndEndDate(startDate.value, endDate.value))
      } else {
        startDate.value = props.startDateVal || ''
        HMessageBox.error('开始日期不能大于结束日期')
      }
    }
  }

  /**
   * 结束日期更新事件
   */
  const handleEndDateChange = () => {
    if (startDate.value && endDate.value) {
      if (isStartDateBeforeEndDate()) {
        emits('change', formatStartAndEndDate(startDate.value, endDate.value))
      } else {
        endDate.value = props.endDateVal || ''
        HMessageBox.error('开始日期不能大于结束日期')
      }
    }
  }

  /**
   * 开始日期清空事件
   */
  const onClearStartDate = () => {
    startDate.value = ''
    emits('change', formatStartAndEndDate(startDate.value, endDate.value))
  }

  /**
   * 结束日期清空事件
   */
  const onClearEndDate = () => {
    endDate.value = ''
    emits('change', formatStartAndEndDate(startDate.value, endDate.value))
  }

  /**
   * 清空日期
   */
  const clearDate = () => {
    startDate.value = ''
    endDate.value = ''
  }

  watch(
    props,
    (val) => {
      startDate.value = val.startDateVal
      endDate.value = val.endDateVal
    },
    { immediate: true },
  )

  defineExpose({
    clearDate,
  })
</script>

<template>
  <div class="date-range-picker">
    <!--开始日期-->
    <el-date-picker
      v-model="startDate"
      :placeholder="props.startDatePlaceholder"
      :style="{ width: `${props.startDateWidth}px`, height: '26px' }"
      clearable
      @change="handleStartDateChange"
      @clear="onClearStartDate"
    />

    <span class="middle">~</span>

    <!--结束日期-->
    <el-date-picker
      v-model="endDate"
      :placeholder="props.endDatePlaceholder"
      :style="{ width: `${props.endDateWidth}px`, height: '26px' }"
      clearable
      @change="handleEndDateChange"
      @clear="onClearEndDate"
    />
  </div>
</template>

<style scoped lang="scss">
  .date-range-picker {
    display: flex;
    column-gap: 5px;

    .middle {
      display: flex;
      align-items: center;
    }
  }

  :deep(.el-input__wrapper) {
    height: 26px;
  }
</style>
